<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>重置登陆密码</title>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/formvalidator.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/static/js/formvalidatorregex.js" charset="UTF-8"></script>
    <link href="/static/css/reset.css" rel="stylesheet" type="text/css" />
    <link href="/static/css/table_form.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .submit,.pass-logo a,.form-login .input label,.item span,#content h2 span em{display:inline-block;display:-moz-inline-stack;zoom:1;*display:inline;}
        .blue,.blue a{color:#377abe}
        .submit input{cursor:hand;}
        .log{line-height:24px; height:24px;float:right; font-size:12px}
        .log span{color:#ced9e7}
        .log a{color:#049;text-decoration: none;}
        .log a:hover{text-decoration: underline;}
        #header{ height:94px; background:url(/static/images/h.png) repeat-x}
        #header .content{width:920px; margin:auto; height:60px;padding:10px 0 0 0}
        #content{width:920px; margin:auto; padding:20px 0 0 0; overflow:auto}
        .form-login{width:420px; padding-left:40px}
        #content h2{font-size:25px;color:#494949;border-bottom: 1px dashed #CCC;padding-bottom:3px; margin-bottom:10px}
        #content h2 span{font-size:12px; font-weight:normal}
        #content h2 span em{background: url(/static/images/order.png) no-repeat 0px -16px; width:15px; height:15px; line-height:15px; text-align:center; margin-right:5px; color:#FFF}
        #content h2 span.on{ color:#333; font-weight:700}
        #content h2 span.on em{background-position: 0px 0px;}
        .form-login .input{ padding:7px 0; overflow:hidden; clear:both}
        .form-login .input label{ width:84px;font-size:14px; color:#8c8686; text-align:right; float:left}
        .form-login .input .form{ width:560px; float:left}
        .take,.reg{padding:0 0 0 84px}
        .take .submit{margin-top:10px}
        .form-login .hr{background: url(/static/images/line.png) no-repeat left center; height:50px;}
        .form-login .hr hr{ display:none}
        .form-reg{padding:10px 0 0 14px; width:700px;}
        .form-reg .input label{ width:120px}
        .form-reg .input label.type{ width:auto; color:#000; padding-right:10px}
        .form-reg .reg{padding:10px 0 0 120px}
        .form-reg .reg .submit{ margin-bottom:5px}
        .submit{padding-left:3px}
        .submit,.submit input{ background: url(/static/images/but.png) no-repeat; height:29px;width:auto;_width:0;overflow:visible !ie}
        .submit input{background-position: right top; border:none; padding:0 10px 0 7px; font-size:14px}
        .reg{ color:#666; line-height:24px}
        .reg .submit{background-position: left -35px; height:35px}
        .reg .submit input{background-position: right -35px; font-weight:700; color:#fff; height:35px}
        .reg-auto{ padding:10px 0 0 20px}
        .reg-auto p{ margin-bottom:10px; color:#666;}
        .col-1{position:relative; float:right; border:1px solid #c4d5df; zoom:1;background: url(/static/images/member_title.png) repeat-x; width:310px; margin: auto; height:304px}
        .col-1 span.o1,
        .col-1 span.o2,
        .col-1 span.o3,
        .col-1 span.o4{position:absolute;width:3px;height:3px;background: url(/static/images/fillet.png) no-repeat}
        .col-1 span.o1{background-position: left -6px; top:-1px; left:-1px}
        .col-1 span.o2{background-position: right -6px; top:-1px; right:-1px}
        .col-1 span.o3{background-position: left bottom; bottom:-1px; left:-1px}
        .col-1 span.o4{background-position: right bottom; bottom:-1px; right:-1px;}
        .col-1 .title{color:#386ea8; padding:5px 10px 3px}
        .col-1 div.content{padding:0px 10px 10px}
        .col-1 div.content h5{background: url(/static/images/ext-title.png) no-repeat 2px 10px; height:34px}
        .col-1 div.content h5 strong{ visibility: hidden}
        .pass-logo{ margin:auto; width:261px; padding-top:15px}
        .pass-logo a img{ border:1px solid #ddd}
        .pass-logo a{border:3px solid #fff}
        .pass-logo a.logo,
        .pass-logo a:hover{border:3px solid #e8f1f1;}
        .pass-logo p{border-top: 1px solid #e1e4e8; padding-top:15px}
        .item{padding:10px 0; vertical-align:middle; margin-bottom:10px}
        .item span{ color:#8c8686}
        #footer{color:#666; line-height:24px;width:920px; margin:auto; text-align:center; padding:12px 0; margin-top:52px; border-top:1px solid #e5e5e5}
        #footer a{color:#666;}
        .point{border:1px solid #ffbf7a; background:#fffced; margin-bottom:10px; margin-right:100px;margin-left:50px;position:relative}
        .point .content{padding:8px 10px;}
        .point .content .title{color:#ff8400}
        .point .content p{color:#777; text-indent:20px}
        .point span.o1,
        .point span.o2,
        .point span.o3,
        .point span.o4{position:absolute;width:3px;height:3px;background: url(/static/images/fillet.png) no-repeat; overflow:hidden}
        .point span.o1{background-position: left top; top:-1px; left:-1px}
        .point span.o2{background-position: right top; top:-1px; right:-1px}
        .point span.o3{background-position: left -3px; bottom:-1px; left:-1px}
        .point span.o4{background-position: right -3px; bottom:-1px; right:-1px;}
        .submit button.hqyz{margin:0px; padding:0px; border:none; cursor:pointer; }
        .submit button.hqyz{
            background-position: 100% 0%;
            border: medium none;
            font-size: 12px;
            padding: 0 10px 0 7px;
        }
        .submit button.hqyz{
            background: url("/static/images/but.png") no-repeat 100% 0px;
            height: 29px;
            width: auto;
        }
        #mobile_div input{*margin-bottom:12px;*_padding:0px 0px 6px 0px}
        .passwordStrength{
            text-align: center;
            color: #8c8686;
            width:250px;
            margin-left: 95px;
        }
        .passwordStrength b{
            font-weight:normal;
        }
        .passwordStrength b,.passwordStrength span{
            display:inline-block;
            vertical-align:middle;
            line-height:16px;
            line-height:18px\9;
            height:16px;
        }
        .passwordStrength span{
            width:45px;
            text-align:center;
            background-color:#d0d0d0;
            border-right:1px solid #fff;
        }
        .passwordStrength .last{
            border-right:none;
        }
        .passwordStrength .bgStrength{
            color:#fff;
            background-color:#71b83d;
        }
    </style>
</head>
<body>
<div id="header">
    <div class="content">
        <span class="log"></span>
    </div>
</div>

<div id="content">
    <h2>重置登录密码&nbsp;&nbsp;&nbsp;&nbsp;<span class="on">填写新密码</span>
    </h2>
    <form method="post" action="/?c=member&a=do_reset_pwd&code=<?php echo $_GET['code'];?>" id="myform">
        <div class="col-left form-login form-reg">
            <div class="point">
                <div class="content">
                    <strong class="title">注意</strong>
                    <p>重置密码链接只可访问一次,请在本次会话中完成密码修改</p>
                </div>
                <span class="o1"></span><span class="o2"></span><span class="o3"></span><span class="o4"></span>
            </div>
            <div class="input"><label>密码：</label><input type="password" id="password" name="password" size="36" class="input-text" plugin="passwordStrength" ></div>
            <div class="input"><div class="passwordStrength">密码强度： <span>弱</span><span>中</span><span class="last">强</span></div></div>
            <div class="input"><label>确认密码：</label><input type="password" name="pwdconfirm" id="pwdconfirm" size="36" class="input-text"></div>
            <div class="input"><label>验证码：</label><input type="text" id="vcode" name="vcode" size="10" class="input-text">
                <img id='code_img' onclick='this.src=this.src+"&"+Math.random()' src=''>
                <a href="javascript:change_vcode();" id="vcode_tip" style="display: none;">看不清，换一张</a>
                <div id="vcodeTip" class=""></div>
            </div>

            <div class="reg">
                <div class="submit"><input type="submit" name="dosubmit" value="提交"></div><br />
            </div>
        </div>
    </form>


</div>

<div id="footer">

</div>
<script type="text/javascript" src="/static/js/Validform_v5.3.2_min.js"></script>
<script type="text/javascript" src="/static/js/passwordStrength-min.js"></script>
<script type="text/javascript">
    var last_vcode = '';//最后一次输入的验证码
    //检验用户输入的验证码是否正确
    //检验用户输入的验证码是否正确
    function check_vcode(codeval){
        var sid = '<?php echo session_id();?>';
        if (!codeval) return 0;
        $.ajax({
            type: "POST",
            dataType: 'json',
            url : "/?c=member&a=checkvcode",
            data: { vcode: codeval,sid:sid},
            beforeSend: function () { },
            success: function (data) {
                var vcodeTip = $("#vcodeTip");
                if (data.code==0){
                    $("input[type=submit]").attr("disabled", true);
                    vcodeTip.attr('class','onError');
                    vcodeTip.text('验证码错误');
                    $("#vcode").val('').focus();
                    change_vcode();
                }else{
                    $("input[type=submit]").attr("disabled", false);
                    vcodeTip.attr('class','onCorrect');
                    vcodeTip.text('验证码正确');
                }
            },
            error :function (XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.status);
                $("input[type=submit]").attr("disabled", false);
            }
        });
    }
    //更换验证码图片
    function change_vcode(){
        var code_img = $("#code_img");
        code_img.attr('src','/?c=member&a=show_verify'+"&"+Math.random());
    }
    $(function(){
        $.formValidator.initConfig({autotip:true,formid:"myform",onerror:function(msg){}});
        $("#password").formValidator({onshow:"请输入密码",onfocus:"密码应该为6-20位之间"}).inputValidator({min:6,max:20,onerror:"密码应该为6-20位之间"});
        $("#pwdconfirm").formValidator({onshow:"请输入确认密码",onfocus:"两次密码不同。",oncorrect:"密码输入一致"}).compareValidator({desid:"password",operateor:"=",onerror:"两次密码不同。"});
        $("#myform").Validform({
            tiptype:2,
            usePlugin:{
                passwordstrength:{
                    minLen:1,
                    maxLen:20
                }
            }
        });
        $("#vcode").focus(function (){
            var code_img = $("#code_img");
            if (!code_img.attr('src')){
                $("#vcode_tip").show();
                code_img.attr('src','/?c=member&a=show_verify');
            }
        });
        $("#vcode").blur(function(){
            var codeval = $(this).val();
            if (codeval!=last_vcode){
                check_vcode(codeval);
            }
            last_vcode = codeval;
        });
    })
</script>
</body>
</html>